<template>
  <div class="print-page-config-panel">
    <el-form
      ref="form"
      label-width="54px"
      label-position="left"
      size="mini"
      :rules="rules"
      :model="formData"
    >
      <div class="print-config-title">{{ $t('模板设置') }}</div>
      <div class="learun-el-form-left mt-8">
        <el-form-item label="名称" prop="f_Name">
          <el-input
            :placeholder="$t('请输入')"
            v-model="formData.f_Name"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item :label="$t('编码')" prop="f_Code">
          <el-input
            :placeholder="$t('请输入')"
            maxlength="50"
            show-word-limit
            v-model="formData.f_Code"
          />
        </el-form-item>
        <el-form-item :label="$t('分类')" prop="f_Category">
          <l-select
            :options="lr_report_scheme_f_TempCategoryOptions"
            v-model="formData.f_Category"
            placeholder="请选择"
          />
        </el-form-item>

        <el-form-item :label="$t('状态')" prop="f_EnabledMark">
          <el-switch
            v-model="formData.f_EnabledMark"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item :label="$t('描述')" prop="f_Description">
          <el-input
            v-model="formData.f_Description"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </div>
    </el-form>

    <el-form label-position="left" size="mini" :model="config">
      <div class="print-config-title">{{ $t('纸张选项') }}</div>
      <el-form-item label="" class="mt-16" label-width="0px">
        <l-select
          v-model="config.pageType"
          :options="paperTypeOption"
          :clearable="false"
        />
      </el-form-item>
      <el-row v-if="config.pageType == '1'">
        <el-col :span="12">
          <el-form-item
            class="form-item-label-pd8"
            :label="$t('宽')(mm)"
            label-width="70px"
          >
            <el-input-number
              v-model="config.pageWidth"
              controls-position="right"
              :min="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            class="form-item-label-pd8"
            :label="$t('高')(mm)"
            label-width="70px"
          >
            <el-input-number
              v-model="config.pageHeight"
              controls-position="right"
              :min="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="" label-width="0px">
        <l-select
          v-model="config.direction"
          :options="directionOption"
          :clearable="false"
        />
      </el-form-item>

      <div class="print-config-title">{{ $t('边距设置') }}</div>
      <el-row class="mt-8">
        <el-col :span="12">
          <el-form-item
            :label="$t('上')"
            class="form-item-label-pd8"
            label-width="32px"
          >
            <el-input-number
              v-model="config.paddingTop"
              controls-position="right"
              style="width: 100px;"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('左')"
            class="form-item-label-pd8"
            label-width="32px"
          >
            <el-input-number
              v-model="config.paddingLeft"
              controls-position="right"
              style="width: 100px;"
              :min="0"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            :label="$t('下')"
            class="form-item-label-pd8"
            label-width="32px"
          >
            <el-input-number
              v-model="config.paddingBottom"
              controls-position="right"
              style="width: 100px;"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('右')"
            class="form-item-label-pd8"
            label-width="32px"
          >
            <el-input-number
              v-model="config.paddingRight"
              controls-position="right"
              style="width: 100px;"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="print-config-title">{{ $t('背景设置') }}</div>
      <div class="mt-8 ml-8">{{ $t('透明度') }}</div>
      <el-row class="ml-8">
        <el-col style="width: 192px">
          <el-slider
            v-model="config.bgOpacity"
            size="mini"
            style="width: 192px"
          />
        </el-col>
        <el-col style="width: 60px;margin-left:16px">
          <el-input-number
            size="mini"
            v-model="config.bgOpacity"
            controls-position="right"
            :min="0"
            :max="100"
          />
        </el-col>
      </el-row>

      <el-form-item class="ml-8" label-width="0px">
        <div style="display: flex">
          <l-checkbox
            v-model="config.isBgColor"
            :options="[{ label: '背景颜色', value: '1' }]"
          />
          <l-input-color
            :notInput="true"
            v-model="config.bgColor"
            style="margin-left: 10px"
          />
        </div>
      </el-form-item>
      <el-form-item class="ml-8" label="" label-width="0px">
        <div style="display: flex">
          <l-checkbox
            :options="[{ label: '背景图片', value: '1' }]"
            v-model="config.isBgImg"
          />
          <l-img-select v-model="config.bgImg" style="margin-left: 10px" />
        </div>
      </el-form-item>
      <el-form-item label="" label-width="0px">
        <l-select
          :clearable="false"
          :options="bgImgOption"
          v-model="config.bgRepeat"
        />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('宽')"
            class="form-item-label-pd8"
            label-width="32px"
          >
            <el-input-number
              v-model="config.bgImgW"
              controls-position="right"
              style="width: 100px;"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('高')"
            class="form-item-label-pd8"
            label-width="32px"
          >
            <el-input-number
              v-model="config.bgImgH"
              controls-position="right"
              style="width: 100px;"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="form-item-label-pd8" :span="12">
          <el-form-item :label="$t('上')" label-width="32px">
            <el-input-number
              v-model="config.originT"
              controls-position="right"
              style="width: 100px;"
            />
          </el-form-item>
        </el-col>
        <el-col class="form-item-label-pd8" :span="12">
          <el-form-item :label="$t('左')" label-width="32px">
            <el-input-number
              v-model="config.originL"
              controls-position="right"
              style="width: 100px;"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="print-config-title">{{ $t('边框设置') }}</div>

      <el-form-item label="" class="mt-16 ml-8" label-width="0px">
        <div style="display: flex">
          <l-checkbox
            :options="[{ label: '边框颜色', value: '1' }]"
            v-model="config.borderShow"
          />
          <l-input-color
            :notInput="true"
            style="margin-left: 10px"
            v-model="config.borderColor"
          />
        </div>
      </el-form-item>
      <el-form-item label="" label-width="0px">
        <el-col :span="16">
          <l-select
            :options="borderOption"
            v-model="config.borderLine"
            :clearable="false"
          />
        </el-col>
        <el-col :span="7" :offset="1" class="ml-8">
          <el-input-number
            v-model="config.borderSize"
            controls-position="right"
            :min="0"
          />
        </el-col>
      </el-form-item>

      <div class="print-config-title">{{ $t('页眉页脚') }}</div>
      <el-form-item label="" class="mt-16 ml-8" label-width="0px">
        <div style="display: flex">
          <l-checkbox
            :options="[{ label: '页眉', value: '1' }]"
            v-model="config.isHeaderShow"
          ></l-checkbox>
          <div style="margin-left: 10px">
            {{ $t('距离顶端') }}
            <el-input-number
              v-model="config.paddingTop"
              controls-position="right"
              style="width: 60px;"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="" class="mt-16 ml-8" label-width="0px">
        <div style="display: flex">
          <l-checkbox
            :options="[{ label: '页脚', value: '1' }]"
            v-model="config.isFooterShow"
          ></l-checkbox>
          <div style="margin-left: 10px">
            {{ $t('距离底端') }}
            <el-input-number
              v-model="config.footerBottomSize"
              controls-position="right"
              style="width: 60px;"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="" label-width="0px">
        <l-select
          :clearable="false"
          :options="alignOption"
          v-model="config.footerAlign"
        />
      </el-form-item>
      <el-form-item label="" label-width="0px">
        <l-select
          :clearable="false"
          :options="footerStyleOption"
          v-model="config.footerStyle"
        />
      </el-form-item>
      <el-form-item v-if="pageNumbers > 1" label="" label-width="0px">
        <l-select
          :clearable="false"
          :options="footerStartOption"
          v-model="config.footerStart"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
    pageNumbers: Number,
  },
  data() {
    return {
      formData: {
        f_Name: "",
        f_Code: "",
        f_Category: "",
        f_EnabledMark: 1,
        f_Description: "",
      },
      rules: {
        f_Name: [{ required: true, message: this.$t("请输入"), trigger: "blur" }],
        f_Code: [
          { required: true, message: this.$t("请输入"), trigger: "blur" },
          {
            validator: this.lr_existDbFiled,
            keyValue: () => {
              return this.formData.f_Id;
            },
            tableName: "lr_print_templateinfo",
            keyName: "f_Id",
          },
        ],
        f_Category: [{ required: true, message: this.$t("请输入"), trigger: "blur" }],
      },
    };
  },
  computed: {
    config() {
      return this.pageConfig;
    },
    // 分类
    lr_report_scheme_f_TempCategoryOptions() {
      this.lr_loadDataItem("printSort");
      return this.lr_dataItemOptions(this.lr_dataItem["printSort"]);
    },
    paperTypeOption() {
      return [
        {
          value: "A3", //['379mm','420mm']
          label: "A3",
        },
        {
          value: "A4", //['210mm','297mm']
          label: "A4",
        },
        {
          value: "A5", //['148mm','210mm']
          label: "A5",
        },
        {
          value: "A6", //['105mm','148mm']
          label: "A6",
        },
        {
          value: "1",
          label: this.$t("自定义"),
        },
      ];
    },
    directionOption() {
      return [
        {
          value: "1",
          label: this.$t("纵向"),
        },
        {
          value: "2",
          label: this.$t("横向"),
        },
      ];
    },
    bgImgOption() {
      return [
        {
          value: "1",
          label: this.$t("不重复"),
        },
        {
          value: "2",
          label: this.$t("自适应铺满"),
        },
        {
          value: "3",
          label: this.$t("水平重复"),
        },
      ];
    },
    borderOption() {
      return [
        {
          value: "solid",
          label: this.$t("实线"),
        },
        {
          value: "dashed",
          label: this.$t("虚线"),
        },
        {
          value: "dotted",
          label: this.$t("点虚线"),
        },
        {
          value: "double",
          label: this.$t("双实线"),
        },
      ];
    },

    alignOption() {
      return [
        {
          value: "center",
          label: this.$t("水平居中"),
        },
        {
          value: "left",
          label: this.$t("水平居左"),
        },
        {
          value: "right",
          label: this.$t("水平居右"),
        },
      ];
    },
    footerStyleOption() {
      return [
        {
          value: "1",
          label: "1, 2, 3 ...",
        },
        {
          value: "2",
          label: "- 1 -, - 2 -, - 3 - ...",
        },
        {
          value: "3",
          label: "—— 1 ——, —— 2 ——, —— 3 —— ...",
        },
        {
          value: "4",
          label: "Ⅰ, Ⅱ, Ⅲ ...",
        },
        {
          value: "5",
          label: "第 1 页",
        },
        {
          value: "6",
          label: "第 1 页 共 x 页",
        },
        {
          value: "7",
          label: "1 / x",
        },
        {
          value: "8",
          label: "第一页",
        },
        {
          value: "9",
          label: "第一页 共X页",
        },
      ];
    },
    footerStartOption() {
      const res = [];
      for (let i = 0; i < this.pageNumbers; i++) {
        res.push({
          label: `${this.$t('第')}${i + 1}${this.$t('页开始')}`,
          value: i + 1,
        });
      }
      return res;
    },
  },
  methods: {
    resetForm() {
      this.formData.f_Id = "";
      this.$formClear(this.$refs.form);
    },
    async validateForm() {
      if (!(await this.$formValidateWraper(this.$refs.form))) {
        return false;
      }
      return true;
    },
    setForm(data) {
      this.formData = data;
    },
    getForm() {
      return this.$deepClone(this.formData);
    },
  },
};
</script>
